<template>
  <div class="box-yuyi">
    <div class="box-left">
      <!--<div class="menu">
        <el-button type="primary" size="small" icon="el-icon-plus">添加</el-button>
        <el-button type="danger" plain size="small" icon="el-icon-delete" @click="handleDelTree">删除</el-button>
      </div>-->
      <avue-tree
        class="left-tree"
        :option="option"
        :loading="treeLoading"
        :data="categoryTreeData"
        @node-click="nodeClick"
        v-model="form">
      <span class="el-tree-node__label" slot-scope="{ node, data }">
        <span>
          <i v-if="data.icon" :class="data.icon"></i>
          {{ (node || {}).label }}
        </span>
      </span>
      </avue-tree>
    </div>
    <div class="box-content">
      <div class="head-search">
        <search @onSubmit="onSearch">
          <el-form-item>
            <el-input placeholder="请输入划控词"
                      clearable
                      v-model="searchData.val"
                      size="small"></el-input>
          </el-form-item>
        </search>
      </div>
      <div class="fun-btn">
        <el-button type="primary"
                   size="small"
                   icon="el-icon-circle-plus-outline"
                   @click="handleAddEdit('add')">新增
        </el-button>
        <el-button type="danger" :loading="batchDelLoading" plain size="small" icon="el-icon-delete" @click="handleDel('batch')">批量删除</el-button>
      </div>

      <section class="list-box">
        <el-table
          :data="tableData"
          border
          v-loading="tableLoading"
          @selection-change="handleSelectionChange"
          height="calc(100vh - 250px)"
          class="table">
          <el-table-column
            align="center"
            type="selection"
            fixed="left"
            width="60">
          </el-table-column>
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="60">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="delimitationControlWord"
            label="划控词"
            width="180">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="isEnable"
            label="是否可用"
            width="130">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.isEnable"></el-switch>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="orderNo"
            align="center"
            width="120"
            label="排序号">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="remark"
            min-width="200"
            label="备注">
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="130">
            <template slot-scope="scope">
              <el-button type="text"
                         icon="el-icon-edit"
                         @click="handleAddEdit('edit', scope.row)">编辑
              </el-button>
              <!--<el-button @click="handleDel('single', scope.row)"
                         icon="el-icon-delete"
                         type="text"
                         style="color: #F56C6C">删除
              </el-button>-->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageNo"
          :page-sizes="[20, 40, 60, 80]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </section>

      <el-dialog :title="dialogTitle"
                 width="60%"
                 top="5vh"
                 :destroy-on-close="true"
                 :close-on-click-modal="false"
                 :close-on-press-escape="false"
                 :visible.sync="dialogAddEdit">
        <div class="import-content">
          <auxiliary-add-edit :type="type"
                    :leftData="leftTreeData"
                    :editData="editData"
                    @handleSuccess="handleSuccess"
                    @handleCancel="dialogAddEdit = false"></auxiliary-add-edit>
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import Search from '../../../../components/search/search'
import { mapActions } from 'vuex'
import { batchDelList, requestAuxiliaryList, requestLeftTree } from '../../../../api/auxiliary'
import AuxiliaryAddEdit from '../settingComponents/auxiliary/auxiliaryAddEdit'

export default {
  name: 'Auxiliary', // 辅助鉴定表
  components: {
    AuxiliaryAddEdit,
    Search
  },
  data () {
    return {
      treeLoading: true,
      tableLoading: false,
      batchDelLoading: false,
      option: {
        defaultExpandAll: true,
        menu: false,
        filter: false,
        props: {
          label: 'nodeName',
          value: 'id',
          children: 'children'
        }
      },
      form: {},
      categoryTreeData: [],
      dialogAddEdit: false,
      type: 'add',
      dialogTitle: '',
      editData: {},
      searchData: {
        val: '',
        select: ''
      },
      page: {
        pageNo: 1,
        pageSize: 20,
        total: 0
      },
      tableData: [],
      params: [],
      tableSelected: [], // 列表选中项目
      leftTreeData: {}
    }
  },
  mounted () {
    this.setNavNarrow(true)
    this.getLeftCategory()
  },
  methods: {
    ...mapActions('profile/navNarrow', ['setNavNarrow']),
    getLeftCategory () {
      // 左侧获取门类
      requestLeftTree().then(res => {
        this.categoryTreeData = res.data.data
        this.treeLoading = false
      }).catch(() => {
        this.treeLoading = false
      })
    },
    nodeClick (data) {
      // console.log(data)
      this.leftTreeData = data
      this.getList()
    },
    getList () {
      const param = {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        params: [{
          name: 'pid',
          op: 'eq',
          value: this.leftTreeData.pid || 0
        }],
        sorters: [{
          asc: true,
          name: 'orderNo'
        }]
      }
      if (this.params.length > 0) {
        param.params = param.params.concat(this.params)
      }
      this.tableLoading = true
      requestAuxiliaryList(param).then(res => {
        this.tableData = res.data.data.list
        this.page.total = res.data.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.page.pageNo = val
      this.getList()
    },
    onSearch (val) {
      // 搜索
      if (this.searchData.val) {
        this.params = [{
          name: 'delimitationControlWord',
          op: 'like',
          value: this.searchData.val
        }]
      }
      this.getList()
    },
    handleSelectionChange (selection) {
      // 勾选表格行
      this.tableSelected = selection
    },
    handleAddEdit (type, row) {
      this.type = type
      this.dialogTitle = type === 'add' ? '新增' : '修改'
      this.dialogAddEdit = true
      this.editData = row || {}
    },
    handleDelTree () {
      // 左侧树删除
    },
    handleSuccess () {
      this.dialogAddEdit = false
      this.getLeftCategory()
      this.getList()
    },
    handleDel () {
      if (this.tableSelected.length < 1) {
        this.$message.warning('请至少勾选一条数据删除！')
        return
      }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 批量删除
        const ids = []
        this.tableSelected.map(item => {
          ids.push(item.id)
        })
        this.batchDelLoading = true
        batchDelList(ids).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.batchDelLoading = false
          this.getList()
        }).catch(() => {
          this.batchDelLoading = false
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .box-yuyi {
    margin: 0 -10px;
  }

  .head-search {
    padding-top: 10px;

    ::v-deep .search-btn {
      margin-top: 0;
    }
  }

  .menu {
    padding: 15px;
  }

  .left-tree {
    height: calc(100vh - 150px);
  }

</style>
